<template lang="html">
  <div class="TanSetBox">
    <el-row>
      <el-col :span="3" class="text-right">
        <span>退款政策名：</span>
      </el-col>
      <el-col :span="10">
        <el-input size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="5">
        <span class="gray">建议10个字以内</span>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="3" class="text-right">
        <span>是否可退：</span>
      </el-col>
      <el-col :span="6" class="text-left">
        <el-radio class="radio" v-model="radio" label="1">可退</el-radio>
        <el-radio class="radio" v-model="radio" label="2">不可退</el-radio>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="3" class="text-right">
        <span>规则组合：</span>
      </el-col>
      <el-col :span="18" class="text-left">
        <el-tag
          :key="tag"
          v-for="tag in Tags"
          type="gray"
          :closable="true"
          :close-transition="false"
          @close="handleClose(tag)"
        >
        {{tag}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="mini"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm">
        </el-input>
        <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ 增加规则</el-button>
        <span class="gray" style="margin-left:10px;">该时间节点的退款金额比例，按实付计算</span>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="3" class="text-right">
        <span>政策说明：</span>
      </el-col>
      <el-col :span="10">
        <el-input :rows="5" type="textarea" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="10">
        <span class="gray" >清晰简洁描述该退款政策，会显示在前端页面</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return {
      radio:"1",
      Tags: ['有效期', '全款', '标签三'],
      inputVisible: false,
      inputValue: ''
    }
  },
  methods:{
    handleClose(tag) {
      this.Tags.splice(this.Tags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.Tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
}
</script>

<style lang="Sass">
.TanSetBox{
  .el-button--mini{
    span{font-size: 12px;}
  }
  .input-new-tag{width: 100px;}
}
</style>
<style lang="Sass" scoped>
.TanSetBox{
  span{font-size: 13px; line-height: 30px;}
  .el-radio{margin-top: 4px;}
  .el-tag{ line-height: 22px; margin-right: 10px; margin-bottom: 5px;}
}
</style>
